<template>
	<view class="position-r">
		<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" mode="round" :current="current"
			:dotsStyles="dotsStyles">
			<swiper class="width100 height-750" @change="change">
				<swiper-item v-for="(item, index) in swiperList" :key="index" class="width100 height-750">
					<image v-if="isType == 1" :src="item" mode="aspectFit" class="width100 height-750">
					</image>
					<video v-else :src="item" object-fit="cover" class="width100 height-750">
					</video>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view v-if="info.video" class="position-a v-flex height-60 br-30 text-c lh-60 width-230 fs-28 bg-gray black"
			style="bottom: 100rpx;left: 30rpx;">
			<view :class="'flex-1 br-30 ' + (isType == 1 ? ' bg-color white' : '') " @click="isType = 1">图片</view>
			<view :class="'flex-1 br-30 ' + (isType == 2 ? ' bg-color white' : '') " @click="isType = 2">视频</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				current: 0,
				dotsStyles: {
					selectedBackgroundColor: "#fff",
					backgroundColor: 'rgba(255, 255, 255, 0.5)'
				},
				caseInfo: '',
				swiperList: [],
				isType: 1
			}
		},
		computed: {
			// list () {
			// 	const info = { ...this.info };
			// 	const image_list = info.image_list && info.image_list.split(',') || [];
			// 	if (info.image) {
			// 		image_list.unshift(info.image);
			// 	}
			// 	return image_list;
			// }
		},
		watch: {
			isType: {
				handler(e) {
					console.log(e,'eeee');
					console.log(this.caseInfo,'eeee');
					if (e == 1) {
						this.swiperList = this.caseInfo.image_list
					} else {
						this.swiperList = this.caseInfo.video
					}
				}
			},
			info: {
				handler(old, val) {
					console.log(old, val);
						const info = {
							...old
						};
						const image_list = info.image_list && info.image_list.split(',') || [];
						if (info.image) {
							image_list.unshift(info.image);
						}
						info.image_list = image_list;
						this.swiperList = image_list;
						info.video = info.video ? [info.video] : [];
						this.caseInfo = info;
						console.log(this.caseInfo, '----333');
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			change (e) {
				console.log(e);
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
</style>